<template>
  <div class="container_box font_customer">
    <img class="bg" src="../assets/img/bg-2.jpg" alt="" />
    <span class="title_class "
      >飞&nbsp;&nbsp;&#8197;羊&nbsp;&nbsp;&#8197;智&nbsp;&nbsp;&#8197;慧&nbsp;&nbsp;&#8197;门&nbsp;&nbsp;&#8197;店&nbsp;&nbsp;&#8197;管&nbsp;&nbsp;&#8197;理&nbsp;&nbsp;&#8197;中&nbsp;&nbsp;&#8197;心</span
    >
    <div class="login_box ">
      <div class="top_class ">
        <div
          style="margin-right:35px;"
          :class="currentMethod == 1 ? 'font_weight' : 'font_weight_normal'"
          @click="methodClick(1)"
        >
          密码
        </div>
        <div class="line_class">/</div>
        <div
          style="margin-left:35px;"
          :class="currentMethod == 2 ? 'font_weight' : 'font_weight_normal'"
          @click="methodClick(2)"
        >
          验证码
        </div>

      </div>



      <div class="bottom_class ">
        <div class='input_box' >
          <!--  -->
          <div class='input_content_box' :class="inputType==1?'input_content_select_border':'input_content_unselect_border'">
             <input v-model="inputPhone" id='accountId' @input="changePhone" :maxLength="requiredMaxPhoneLength" style="width:100%;height:100%;"  placeholder="请输入你的账号" autocomplete="off" type="text" >
             <div  class='icon_cus' :style="{display:phoneImgShow==true?'block':'none',color:inputType==1?'#19c7f2':'#1f5186'}">
               <!-- <span class='iconfont icon-203yonghu_yonghu4'></span> -->
               <a-icon type="user" />
             </div>
              <div :style="{display:inputType==1?'block':'none'}">
                <div class="four_border_corner four_border_corner_left_top"></div>
                <div class="four_border_corner four_border_corner_right_top"></div>
                <div class="four_border_corner four_border_corner_left_bottom"></div>
                <div class="four_border_corner four_border_corner_right_bottom"></div>
              </div>

             </div>



          <!-- <input style="margin-top:6.32%" type="text"> -->
         <!-- <a-input-password class='input_password'
                  v-model="inputPassword"
                  placeholder="请输入密码"
                  style="margin:20px 0;"
                /> -->
                <div style="margin-top:6.32%"></div>
                <div class='input_content_box' :class="inputType==2?'input_content_select_border':'input_content_unselect_border'" :style="{display:currentMethod == 1?'block':'none'}">
                  <input  v-model="inputPassword" id='passwordId' @input="changePassword" style="width:100%;height:100%;" type="password"    maxlength="20" placeholder="请输入你的密码" autocomplete="off"/>

                   <div  class='icon_cus' :style="{display:passwordImgShow==true?'block':'none',color:inputType==2?'#19c7f2':'#1f5186'}">
                     <!-- <span class='iconfont icon-mima'></span> -->
                     <a-icon type="key" />
                   </div>
                  <div :style="{display:inputType==2?'block':'none'}">
                      <div class="four_border_corner four_border_corner_left_top"></div>
                      <div class="four_border_corner four_border_corner_right_top"></div>
                      <div class="four_border_corner four_border_corner_left_bottom"></div>
                      <div class="four_border_corner four_border_corner_right_bottom"></div>
                  </div>


                </div>
                 <div class='input_content_box input_content_select_border' :style="{display:currentMethod == 2?'block':'none'}">
                  <input v-model="code" id='codeId' @input="changeCode" :maxLength="requiredMaxCodeLength" style="width:100%;height:100%;"  placeholder="请输入验证码" autocomplete="off" type="text" >

                   <div  class='icon_cus' :style="{display:codeImgShow==true?'block':'none',color:inputType==3?'#19c7f2':'#1f5186'}">
                     <span class='iconfont icon-yanzhengmamima' ></span>
                   </div>
                   <div v-if="getCodeWordshow" class="code_get" @click="getCodeClick">
                     获取
                   </div>
                   <div v-if="!getCodeWordshow" class="code_get">
                {{ times }}s
              </div>
                  <div :style="{display:inputType==3?'block':'none'}">
                      <div class="four_border_corner four_border_corner_left_top"></div>
                      <div class="four_border_corner four_border_corner_right_top"></div>
                      <div class="four_border_corner four_border_corner_left_bottom"></div>
                      <div class="four_border_corner four_border_corner_right_bottom"></div>
                  </div>


                </div>

          <!-- <div class='forget_apply'>
            <span @click="forgetPwdClick">忘记密码？</span> -->
            <!-- <span @click="applyClick">申请入驻</span> -->
          <!-- </div> -->

        </div>
           <div class='introduce'>
            <a-checkbox @change="onIntroduceChange" :checked='agreeIntroduce'>

            </a-checkbox>
            <span>登陆代表您以阅读并同意<span style="padding-bottom:2px; border-bottom:1px solid white" @click="introduceClick">用户协议</span>及<span style="padding-bottom:2px; border-bottom:1px solid white" @click="policyClick">隐私政策</span>说明</span>
          </div>
      </div>


    </div>

    <div class='login_class'>
      <div    @mouseover="hoverIndex = 0" @mouseout="hoverIndex = -1" @click="immediateLoginBtnClick">登录
      <div :style="{display:hoverIndex==0?'block':'none'}">
        <div class="four_border_corner four_border_corner_left_top"></div>
        <div class="four_border_corner four_border_corner_right_top"></div>
        <div class="four_border_corner four_border_corner_left_bottom"></div>
        <div class="four_border_corner four_border_corner_right_bottom"></div>
      </div>
    </div>
    </div>

    <div class='support_class'>技术支持：山东飞羊数字科技股份有限公司</div>
    <!-- <div class='support_class' @click='small'>最小</div><div class='support_class' @click='big'>最大</div> <div class='support_class' @click='close'>关闭</div> -->
</div>

</template>
<script>
// const { ipcRenderer } = window.require('electron')
// import ipcRenderer from 'electron'
import md5 from "js-md5";
import $ from 'jquery'
import {
  SENDLOGINMSGCODEAPI,
  lOGINBYMSGCODEAPI,
  LOGINBYPWDAPI,

} from "../api/index.js";
export default {
  data() {
    return {
    
      menuList:[],
      hoverIndex: -1, // 菜单hover索引
      inputType:0,// 1手机号 2密码 3验证码
      agreeIntroduce:true,
      currentSelectLoginMethod: 0, // 0密码登录 1验证码登录
      requiredMaxPhoneLength: 11, // 手机号长度
      requiredMaxCodeLength: 8,
      times: 60,
      getCodeWordshow: true, // getCodeWordshow 用于控制显示获取验证码和读秒，true：显示获取验证码  false：显示读秒
      inputPhone: "", // 手机号
      inputPassword: "", // 密码
      // inputPhone:'',// 手机号
      // inputPassword:'',// 密码
      code: "", // 验证码
      currentMethod: 1,
      phoneImgShow:true,
      passwordImgShow:true,
      codeImgShow:true,
    };
  },
  computed: {},

  methods: {

//     small(){
// 	ipcRenderer.send('min')
// },
// big(){
// 	ipcRenderer.send('max')
// },
// close(){
// 	ipcRenderer.send('close')
// },
    immediateLoginBtnClick() {
      if (!this.inputPhone) {
        this.$message.error("请输入手机号");
        return;
      }

      // if (!this.isTel(this.inputPhone)) {
      if (!this.$common.isTel(this.inputPhone)) {
        this.$message.error("手机号格式不正确");
        return;
      }
      if (this.currentMethod == 1 && !this.inputPassword) {
        this.$message.error("请输入密码");
        return;
      }
      if (this.currentMethod == 2 && !this.code) {
        this.$message.error("请输入验证码");
        return;
      }
      if(this.agreeIntroduce==false){
         this.$message.error("请勾选用户协议");
        return;
      }

      console.log("立即登录点击了");
      this.login();
    },

    phoneChange(e) {
      console.log("手机号", e);
    },
    loginMethodChange(key) {
      console.log(key);
      this.currentSelectLoginMethod = key;
    },
    introduceClick() {
       // window.open("https://api.feiyanghy.life/img/userSecret.html");
        this.$router.push("/agreement");
    },
    policyClick() {
      this.$router.push("/policy");
    },
    applyClick() {
      console.log("申请提交--点击");
      this.$router.push("/apply");
    },
    forgetPwdClick() {
      console.log("忘记密码点击");
      this.$router.push("/forgetPwd");
    },
    getCodeClick() {
      if (!this.inputPhone) {
        this.$message.error("请输入手机号");
        return;
      }
       if (!this.$common.isTel(this.inputPhone)) {
        this.$message.error("手机号格式不正确");
        return;
      }
      var that = this;
      var jsonParams = { telephone: this.inputPhone, flag: md5("LMC") };



        console.log('参数为——--',jsonParams,'a----', this.globalRequestUrl.SENDLOGINMSGCODEAPI);
      this.$http
          .post(
            this.globalRequestUrl.SENDLOGINMSGCODEAPI,
            this.qs.stringify(jsonParams)
          )
          .then((res) => {
            if (res.data.status == 200) {
              console.log("SENDLOGINMSGCODEAPI---", res);
              
              
          that.getCodeWordshow = false;
          that.timer = setInterval(() => {
            that.times--;
          if (that.times === 0) {
            that.getCodeWordshow = true;
            that.times = 60;
            clearInterval(that.timer);
          }
        }, 1000);
          
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(function (err) {
            this.$message.error("服务器错误，请检查！");
          });




    },

    // isTel(tel) {
    //   var reg = /^1[345789]\d{9}$/;
    //   return reg.test(tel);
    // },
    login() {
      console.log("手机号为" + this.inputPhone + "验证码为" + this.code);

      console.log("登录点击了");
      var jsonParams;
      var apiUrl;
      if (this.currentMethod == 1) {
        // 密码登录
        jsonParams = {
          telephone: this.inputPhone,
          password: this.inputPassword
        };
        apiUrl = this.globalRequestUrl.LOGINBYPWDAPI;
      } else {
        // 验证码登录
        jsonParams = { telephone: this.inputPhone, msgCode: this.code };
        var apiUrl = this.globalRequestUrl.lOGINBYMSGCODEAPI;
      }

 

             console.log('denglujson---',jsonParams);

            this.$http
          .post(
            apiUrl,
            this.qs.stringify(jsonParams)
          )
          .then((res) => {
            if (res.data.status == 200) {
              console.log("登a录信息---", res);
              
              this.$store.commit("handleCbUserInfo",  JSON.stringify(res.data.data.user));      
              this.$store.commit("setCbUserId", res.data.data.user.id);   
              this.$store.commit("setCbUserPhone", res.data.data.user.phone);   
              this.$store.commit("setCbToken",res.data.data.token);      
              this.$router.push("/selectStore");
          
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(function (err) {
            // this.$message.error("服务器错误，请检查！");
          });





    },
    methodClick(type) {
      this.currentMethod = type;
      // if(){

      // }
    },
    changePhone(e) {
  const { value } = e.target;
  console.log('value为',value);
  if(value){
    this.phoneImgShow = false;
  }else{
    this.phoneImgShow = true;
  }
  // if(value) {
  //   this.isLogin = false
  // } else {
  //   this.isLogin = true
  // }
},
 changeCode(e) {
  const { value } = e.target;
  console.log('value为',value);
  if(value){
    this.codeImgShow = false;
  }else{
    this.codeImgShow = true;
  }
  // if(value) {
  //   this.isLogin = false
  // } else {
  //   this.isLogin = true
  // }
},

  changePassword(e) {
  const { value } = e.target;
  console.log('value为',value);
  if(value){
    this.passwordImgShow = false;
  }else{
    this.passwordImgShow = true;
  }
  // if(value) {
  //   this.isLogin = false
  // } else {
  //   this.isLogin = true
  // }
},
onIntroduceChange(e){
console.log('值--',e.target.checked);
this.agreeIntroduce = e;
},
// mouseover(){
//   this.hoverIndex = 0;
// }

  },
  components: {},
  mounted() {

   var phone = window.localStorage.getItem("cbUserPhone");
    console.log('手ff机号---',phone);
    this.inputPhone = phone?phone:'';
    // if(this.$route.query.loginInfo){
    //   // window.sessionStorage.removeItem("cbUnionIdent");
    //   this.autoLoginFunc(JSON.parse(this.$route.query.loginInfo));
    //   console.log('111111');

    //   return;
    //   // this.autoLogin();
    // }else{
    //   console.log('222222');
    // }



    // this.$store.commit("clearCommitData", "");
    // localStorage.removeItem("cbUserInfo"); // 用户基本信息
    // localStorage.removeItem("cbStoreInfo"); // 店铺信息

    // localStorage.removeItem("cbToken"); //
    // localStorage.removeItem("cbUserId");
    // localStorage.removeItem("employeeUserId");
    // localStorage.removeItem("userType");

    // localStorage.removeItem("cbStoreId");
    // localStorage.removeItem("cbStoreImage");
    // localStorage.removeItem("cbStoreName");

     localStorage.removeItem("activeLink");


    var that = this;

    $("#accountId").focus(function(){
      // console.log('光标点击');
      console.log('光标点击',1);
      that.inputType = 1;
				}).blur(function(){
            that.inputType = 0;
	   });
    $("#passwordId").focus(function(){
      // console.log('光标点击');
       console.log('光标点击',2);
      that.inputType = 2;
				}).blur(function(){
           that.inputType = 0;

	  });

     $("#codeId").focus(function(){
      // console.log('光标点击');
       console.log('光标点击',3);
      that.inputType = 3;
				}).blur(function(){
           that.inputType = 0;

	  });



  }
};
</script>
<style scoped lang="less">
.container_box {
  /* position: relative; */
  height: 100%;
  width: 100%;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
}
input::-webkit-input-placeholder {
   /* WebKit, Blink, Edge */
  color: #d2d2d2;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #d2d2d2;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #d2d2d2;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #d2d2d2;
}
.login_box {
  display: flex;
    flex-direction: column;
    align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);

  // background-color: rgba(255, 255, 255, 0.7);
  width: 34.9%;
  height: 42%;
  border-radius: 8px;
  .top_class {
    /* 23.7% */
    position: relative;
    width: 100%;
    height: 23.2%;
    // background-color: tomato;
    display: flex;
    font-size: 28px;
    justify-content: center;
    align-items: center;
    color: #feffff;
  }
  .line_class {
    position: absolute;
    // height: 100%;
    text-align: center;
    /* width: 50px; */
    left: 46%;
    /* top:50%; */
    /* transform: translateX(-50%); */
    /* transform: translate(-50%,50%); */
  }

  .bottom_class {
 display: flex;

    flex-direction: column;
    align-items: center;
    /* 76.3% */
    width: 100%;
    // width: 53.15%;
    height: 76.8%;
    // background-color: green;

    .input_box{
      display: flex;
      flex-direction: column;
      margin-top:8.37%;
      height: 100%;
      width: 52.7%;
    }
    .input_box .input_content_box{
      position: relative;
      height: 23.37%;
    }

    .forget_apply{
      font-size: 11px;
      color:#feffff;
       margin-top: 6.5%;
      display: flex;
      justify-content: space-between;
    }

  }
  .font_weight {
    font-weight: 700;
    font-size: 28px;
  }
  .font_weight_normal {
    font-weight: normal;
    font-size: 25px;
  }
}
.title_class {
  position: absolute;
  width: 100%;
  top: 11%;
  text-align: center;
  font-size: 42px;
  color: #fefefe;
}
.font_customer{
  font-family: "cusfont";
}
.input_box input{
  background-color: #141c21;

}
.introduce{
  margin-bottom: 4%;
  // font-size: 10px;
  // transform: scale(0.9);
  color:#feffff;
}

// input::-webkit-input-placeholder {
//   color: rgb(139, 17, 17);
//   font-size: 15px;
// }
// .ant-input{
//   &::placeholder {
//     color: #FFFFFF;
//   }
// }

/deep/.ant-input{
	// background-color: #333333 !important;
	}

input{
  outline:none;
  color: #d2d2d2;
  text-align:center;
  border:none;
  }

.icon_cus{
  position: absolute;
  color: #19c7f2;
  left:20%;
  top: 50%;
  transform: translateY(-48%);
  // bottom: 0;

}

.login_class{
  position: absolute;
  width: 100%;
    left: 50%;
     transform: translateX(-50%);
  bottom: 19%;
  text-align: center;


  font-size: 24px;
  width: 80px;
  border-radius: 7px;
  height:36px;
  color:#feffff;
  background-color: rgba(0, 0, 0, 0.4);
}
.support_class{
    position: absolute;

    left: 50%;
     transform: translateX(-50%);
  bottom: 5%;
  text-align: center;


  // font-size: 10px;

  border-radius: 7px;
  padding: 4px 10px;

  color:#feffff;
  // background-color: rgba(0, 0, 0, 0.4);
}
.win {
    margin: 20px;
    position: relative;
    display: inline-block;
}
.input_content_select_border {
    border: 1px solid #ffffff;
}
.input_content_unselect_border {
    border: 1px solid #e5e5e5;
}
.four_border_corner{
    z-index: 999;
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0,0,0,0);
    border: 2px solid #19c7f2;
}
.four_border_corner_left_top{
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    // border-top-left-radius: 4px;
}
.four_border_corner_right_top{
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
    // border-top-right-radius: 4px;
}
.four_border_corner_left_bottom{
    bottom: -3px;
    left: -3px;
    border-right: none;
    border-top: none;
    // border-bottom-left-radius: 4px;
}
.four_border_corner_right_bottom{
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    // border-bottom-right-radius: 4px;
}

.code_get{
  position: absolute;
  right:3%;
  top: 50%;
  color:#d2d2d2;
  transform: translateY(-48%);
}

.link-item-hover {
        background-color: #f5f7fa;
      }
      .link-item-active {

        color: #fff;
        background-color: #b3cae4;
      }



// ::-webkit-input-placeholder { color:#f00; }
// ::-moz-placeholder { color:#f00; } /* firefox 19+ */
// :-ms-input-placeholder { color:#f00; } /* ie */
// input:-moz-placeholder { color:#f00; }


// .ant-input[disabled] {
//   color: rgba(0, 0, 0, 0.6);
//   background-color: #f9f9f9;

// }
</style>
